<template>
  <div id="rcly" style="height: 100%; width: 100%; position: absolute; top: 0; left: 0;"></div>
</template>

<script>
import { getRcLy } from "@/api/kjry/kjry";
import * as echarts from "echarts";

export default {
  name: "rcly",
  created() {
    this.getRcLyList()
  },
  methods: {
    getRcLyList() {
      //查询人员分类的人数
      getRcLy().then(res => {
        this.initBT(res.data)
        console.log(res.data, '1111111111111')
      })
    },
    // 实例化柱状图
    initBT(echartsData) {
      let chartDom = document.getElementById('rcly');
      let myChart = echarts.init(chartDom);
      let option;

      // 生成足够数量的颜色选项
      const generateColors = (count) => {
        const colors = [];
        for (let i = 0; i < count; i++) {
          colors.push(defaultColors[i % defaultColors.length]);
        }
        return colors;
      };

      const defaultColors = ['#5470C6', '#91CC75', '#EE6666', '#73A2B3', '#3BA272', '#FC8452', '#9A60B4', '#ea7ccc'];
      const colors = generateColors(echartsData.length);

      option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(255, 255, 255, 0.8)',
          formatter: "{b}: {c} ",
        },
        title: {
          text: '人才领域',
          left: 'center'
        },
        legend: {
          right: 10,
          top: 20,
          bottom: 20,
          orient: 'vertical',
          left: 'left',
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: [],
        },
        series: [
          {
            data: [],
            type: "bar",
            barWidth: "60%",
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }
        ]
      };

      // 填充数据
      for (let i = 0; i < echartsData.length; i++) {
        option.yAxis.data.push(echartsData[i].name);
        option.series[0].data.push({
          value: echartsData[i].value,
          itemStyle: {
            color: colors[i]
          }
        });
      }

      option && myChart.setOption(option);
    },
  },
}
</script>

<style scoped>

</style>
